import {Excalidraw} from "@excalidraw/excalidraw";
import {useState} from "react";
import {AppState, BinaryFiles, ExcalidrawImperativeAPI, LibraryItems} from "@excalidraw/excalidraw/types/types";
import {ExcalidrawElement} from "@excalidraw/excalidraw/types/element/types"


const Flow = () => {
    const [app, setApp] = useState<ExcalidrawImperativeAPI | null>(null)
    const [elements] = useState([])
    const change = (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => {
        console.log((app as ExcalidrawImperativeAPI).getAppState(), appState, files, Object.prototype.toString.call(elements));
    }
    const onLibraryChange = (e: LibraryItems) => {
        console.log('1111111' ,e)
    }
    const excalidrawAPI = (e: ExcalidrawImperativeAPI) => {
        setApp(e)
    }
    return (
        <>
            <Excalidraw
                langCode='zh-CN'
                name='流程图'
                initialData={{
                    appState: {theme: 'light', name: '流程图'},
                    elements: elements,
                    libraryItems: []
                }}
                onChange={change}
                onLibraryChange={onLibraryChange}
                excalidrawAPI={excalidrawAPI}
            />
        </>
    )
}

export default Flow